<template>
  <el-menu
    :default-active="activeIndex"
    class="navigation-menu"
    mode="horizontal"
    router
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <el-menu-item index="/">
      <el-icon><DataBoard /></el-icon>
      <span>数据总览</span>
    </el-menu-item>
    
    <el-menu-item index="/category">
      <el-icon><Category /></el-icon>
      <span>分类分析</span>
    </el-menu-item>
    
    <el-menu-item index="/price">
      <el-icon><TrendCharts /></el-icon>
      <span>价格分析</span>
    </el-menu-item>
    
    <el-menu-item index="/query">
      <el-icon><Search /></el-icon>
      <span>数据查询</span>
    </el-menu-item>
    
    <el-menu-item index="/monitor">
      <el-icon><Monitor /></el-icon>
      <span>系统监控</span>
    </el-menu-item>
    
    <el-menu-item index="/users">
      <el-icon><User /></el-icon>
      <span>用户管理</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

export default {
  name: 'Navigation',
  setup() {
    const route = useRoute()
    const activeIndex = ref('/')

    watch(() => route.path, (newPath) => {
      activeIndex.value = newPath
    }, { immediate: true })

    return {
      activeIndex
    }
  }
}
</script>

<style scoped>
.navigation-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.el-menu-item {
  display: flex;
  align-items: center;
}

.el-menu-item .el-icon {
  margin-right: 5px;
}
</style> 